<!--
  Generated template for the FinanceCalendarPage page.

  See http://ionicframework.com/docs/components/#navigation for more info on
  Ionic pages and navigation.
-->
<ion-header>
  <ion-navbar color="gm-primary">
    <ion-title>财经日历</ion-title>
  </ion-navbar>

  <div class="scroll-view">
    <button ion-button color="primary" clear full *ngFor="let date of date_list;let idx = index"
            [ngClass]="getTabBtnStyle(idx)" (click)="onTabBtnSelected(idx, date.value)">{{date.title}}</button>
  </div>
  <div class="fixed-view">
    <button ion-button color="white" clear full *ngFor="let date of calendar_list;let idx = index"
            [ngClass]="getSubBtnStyle(idx)" (click)="onSubBtnSelected(idx)">{{date}}</button>
  </div>
</ion-header>

<ion-content>
  <ion-fab right bottom>
    <button ion-fab mini color="primary" (click)="onScrollTop()"><ion-icon name="arrow-round-up"></ion-icon></button>
  </ion-fab>

  <ion-list>
    <div class="finance-item" *ngFor="let finance of finance_list" [hidden]="sub_position != 0">
      <div class="header">
        <div class="date">{{finance.time}}</div>
        <div class="title">{{finance.countryName}}&emsp;{{finance.phContext}}</div>
      </div>
      <div class="rating">
        <ion-icon [name]="getItemStarStyle(finance.weightiness >= 1)" color="rating" small></ion-icon>
        <ion-icon [name]="getItemStarStyle(finance.weightiness >= 2)" color="rating" small></ion-icon>
        <ion-icon [name]="getItemStarStyle(finance.weightiness >= 3)" color="rating" small></ion-icon>
      </div>
      <div class="detail">
        <div>
          <div class="title">前&emsp;值:&emsp;<span class="body">{{finance.previous}}</span></div>
          <div class="title">预测值:&emsp;<span class="body">{{finance.predict}}</span></div>
        </div>
        <div *ngIf="finance.textValueList">
          <div *ngFor="let data of finance.textValueList" [ngClass]="getItemPriceStyle(data.type)">{{data.value}}</div>
        </div>
        <div class="real-value" *ngIf="finance.currentValue">
          实际值:&nbsp;<span>{{finance.currentValue}}</span>
        </div>
      </div>
    </div>

    <div class="event-item" *ngFor="let event of event_list"  [hidden]="sub_position != 1">
      <div class="rating">
        <ion-icon [name]="getItemStarStyle(event.weightiness >= 1)" color="rating" small></ion-icon>
        <ion-icon [name]="getItemStarStyle(event.weightiness >= 2)" color="rating" small></ion-icon>
        <ion-icon [name]="getItemStarStyle(event.weightiness >= 3)" color="rating" small></ion-icon>
      </div>
      <div class="title">{{event.event}}</div>
      <div class="country">{{event.area}}</div>
    </div>
  </ion-list>
</ion-content>
